<!--  -->
<template>
  <div class="">
    <el-card class="box-card">
      <div slot="header">
        <span>详情</span>
      </div>
      <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item,index) in tabPanel"
          :key="index"
          :label="item.label"
          :name="item.name"
        >
          <contact-info v-if="roomType===4" :contactData="contactInfo"></contact-info>
          <system-log v-else-if="roomType===5" :LogData="logData"></system-log>
          <asset-info v-else :assetData="assetInfo" :roomType="roomType"></asset-info>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import assetInfo from "@/views/assetDetail/assetInfo";
import contactInfo from "@/views/assetDetail/contactInfo";
import systemLog from "@/views/manage/systemLog/index";
import { getList, getChartInfoRoom } from "@/api/table";
import { getLogByRoomGuid } from "@/api/manage";
import { timestampToDate } from "@/utils/timestampToDate";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { assetInfo, contactInfo, systemLog },
  data() {
    //这里存放数据
    return {
      activeName: "first",
      roomType: 1,
      tabPanel: [
        { label: "资产属性", name: "first" },
        { label: "产权信息", name: "second" },
        { label: "财务信息", name: "third" },
        { label: "合同信息", name: "fourth" },
        { label: "系统日志", name: "five" }
      ],
      assetInfo: {},
      contactInfo: {},
      logData: [],
      guid: this.$route.query.guid
    };
  },
  //监听属性 类似于data概念
  computed: {
    // guid() {
    //   return this.$route.query.guid;
    // }
  },
  //监控data中的数据变化
  watch: {
    guid(val) {
      console.log("guid", val);
      this.activeName = "first";
      this.roomType = 1;
    }
  },
  //方法集合
  methods: {
    handleClick(data) {
      console.log("name", data.name);
      switch (data.name) {
        case "first":
          this.roomType = 1;
          break;
        case "second":
          this.roomType = 2;
          break;
        case "third":
          this.roomType = 3;
          break;
        case "fourth":
          this.roomType = 4;
          this.fetchChartData();
          break;
        case "five":
          this.roomType = 5;
          this.fetchLogData();
          break;
        default:
          break;
      }
    },
    //获取资产相关信息
    fetchData() {
      let data = { page: 1, limit: 10, roomGuid: this.guid };
      getList(data).then(res => {
        this.assetInfo = res.body;
      });
    },
    //获取合同信息
    fetchChartData() {
      let data = { offset: 1, limit: 10, guid: this.guid };
      getChartInfoRoom(data).then(res => {
        this.contactInfo = res.body;
      });
    },
    //获取日志信息
    fetchLogData() {
      getLogByRoomGuid(this.guid).then(res => {
        this.logData = res.body;
        res.body.forEach(item => {
          item.date = timestampToDate(item.date, "yyyy-MM-dd");
        });
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log("create");
    this.fetchData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log("mounted");
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {
    console.log("activated", this.$route.query.guid);
    this.guid = this.$route.query.guid;
    this.fetchData();
  } //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.box-card {
  margin: 20px;
}
.tabs {
  margin: 10px;
}
</style>